<style scoped>
    .box{width: 100%;height: 100%;}
    .pp{font-size: 18px;font-weight: bold;}
    .pp1{text-align: center;}
    .box .min1{width: 100%;height: 25%;background-color: #c1ab96;}
    .box .min1 .top1 {width: 100%;height: 50%;background-color: #c1ab96;display: flex;}
    .box .min1 .top1 :nth-child(1){width: 20%;height: 100%;}  
    .box .min1 .top1 :nth-child(2){width: 40%;height: 100%;} 
    .box .min1 .top2{display: flex;display: -webkit-flex;}
    .box .min1 .top2 .tt{flex: 1;background-color: #c1ab96;cursor: pointer;}
    .box .min1 .top2 .tt p{text-align: center;line-height: 18px;}
    .box .min2{width: 100%;height: 9%;display: flex;display: -webkit-flex;}
    .box .min2 div{flex: 1;}
    .box .min2 div p:nth-child(1){text-align: center;line-height: 30px;margin: 10px;}
    .box .min2 div .p2{text-align: center;line-height: 22px;margin: 1px;}
    .box .min3{width: 100%;height: 25%;display: flex;flex-wrap: wrap;}
    .box .min3 div{width: 25%;height: 50%;cursor: pointer;}
    .box .min3 div p:nth-child(1){text-align: center;line-height: 30px;margin: 10px;}
    .box .min3 div .p2{text-align: center;line-height: 22px;margin: 1px;}
    .box .min4{width: 100%;display: flex;flex-wrap: wrap;justify-content: center;}
    .box .min4 div{width: 48%; height: 40%;}
    .box .min4 div img{width: 100%;height: 60%;cursor: pointer;}
</style>
<template>
    <div class="box">
        <div class="min1">
            <div class="top1">
                <div><img src="@/assets/img/2.jpg" /></div>
                <div>
                    <p>OMINI.BASS</p>
                    <p>188****7024</p>
                </div>
            </div>
            <div class="top2">
                <div class="tt" v-for="item in toplist" :key="item.name">
                    <p>{{item.name}}</p>
                    <p>{{item.num}}</p>
                </div>
            </div>
        </div>
        <p class="pp">我的订单</p>
        <div class="min2">
            <div class="dd"  v-for="item in ddlist" :key="item.name">
                <p><van-icon :name="item.name1" size="30" color="#f0d5b8" /></p>
                <p class="p2">{{item.name}}</p>
            </div>
        </div>
        <p class="pp">常用工具</p>
        <div class="min3">
            <div  v-for="item in toollist" :key="item.name" @click="addr(item.id)">
                <p><van-icon :name="item.name1" size="30" color="#f0d5b8" /></p>
                <p class="p2">{{item.name}}</p>
            </div>
        </div>
        <p class="pp pp1">为你推荐</p>
        <div class="min4">
            <div class="tp" v-for="item in toollist" :key="item.name">
                <div>
                    <img src="@/assets/img/2.jpg" />
                    <p>详情请</p>
                    <p>满减，领卷</p>
                    <p>￥<span>523.6</span></p>
                </div>
            </div>
        </div>
    </div>
    <but></but>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import but from '@/componets/but.vue'
import { useRouter } from 'vue-router';
    const $router = useRouter();
    
    let toplist=reactive([
        {name:'收藏夹',num:190},
        {name:'关注店铺',num:37},
        {name:'足迹',num:99},
        {name:'卡卷',num:2}
    ])
    let ddlist=reactive([
        {name:'待付款',num:190,name1:'printer'},
        {name:'待收货',num:37,name1:'send-gift'},
        {name:'已完成',num:99,name1:'wechat-pay'},
        {name:'退款/售后',num:2,name1:'bill'}
    ])
    let toollist=reactive([
        {name:'收货地址',id:1,name1:'location'},
        {name:'我的评价',id:2,name1:'award'},
        {name:'签到中心',id:3,name1:'checked'},
        {name:'领卷中心',id:4,name1:'coupon'},
        {name:'客服',id:5,name1:'audio'},
        {name:'店铺直播',id:6,name1:'play-circle'},
        {name:'设置',id:7,name1:'setting'}
    ])
    let addr=(item:any)=>{
        console.log(item);

        if(item ==5){
            $router.push({path:"customerSer"})
        }else if(item ==6){
            $router.push({path:"broadCast"})
        }else if(item ==7){
            $router.push({path:"setUp"})
        }
    }
</script>
